<template>
  <div id="personal-sitewallet">
    <div class="sitewallet-box">
      <NavBar title="添加钱包地址" left-arrow @click-left="onClickLeft" />

      <Form @submit="onSubmit">
        <Field
          label="币种"
          v-model="typeid"
          name="币种"
          placeholder="请选择"
          @click="showPicker = true"
        />
        <Popup v-model="showPicker" round position="bottom">
          <Picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
            :rules="[{ required: true, message: '请选择证件类型' }]"
          />
        </Popup>
        <Field
          v-model="site"
          name="充币地址"
          label="充币地址"
          placeholder="钱包地址"
        />

        <Field name="uploader" label="钱包二维码：">
            <template #input>
              <div class="upload">
                <div class="upload-top">
                  <uploader v-model="uploader" />   
                </div>
                <span>点击上传图片</span>
              </div>
            </template>
          </Field>

        <div class="btn">
          <Button round block type="info" native-type="submit">提交</Button>
        </div>
      </Form>
    </div>
  </div>
</template>
<script>
import { NavBar, Form, Field, Picker, Popup, Button, uploader, } from "vant";
export default {
  components: {
    NavBar,
    Form,
    Field,
    Picker,
    Popup,
    Button,
    uploader,
  },

  data() {
    return {
      site: "", //充币地址
      typeid: "", // 证件类型
      username: "", // 姓名
      identity: "", // 身份证
      showPicker: false,
      columns: ["身份证", "护照", "驾照"],
      uploader: [], // 身份证正面
      uploader2: [], // 身份证反面
    };
  },

  // 创建时
  created() {},

  // 方法
  methods: {
    // 跳出
    onClickLeft() {
      console.log("跳出");
      this.$router.go(-1);
    },

    // 展开选择证件类型
    onConfirm(typeid) {
      this.typeid = typeid;
      this.showPicker = false;
    },

    // 添加钱包地址提交
    onSubmit(values) {
      console.log("submit", values);
    },

    // 网络请求
  },
};
</script>
<style lang="less" scoped>
#personal-sitewallet {
  width: 100vw;
  height: 100vh;
  background-color: #f7f6fb;
  .sitewallet-box {
    width: 100%;
    .upload {
        flex-direction: column;
      }
    .btn {
        width: 350px;
        margin: 16px auto;
      }
  }
}
</style>
